<template>
    <div class="schedule">
      <el-card class="card">
        <!-- 课程安排页面 -->
        <div v-show="scheduleText">
          <!-- 面包屑 -->
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>课程安排管理</el-breadcrumb-item>
          </el-breadcrumb>
          <!-- 搜索框 -->
          <div class="user-search">
            <el-input
            clearable
            placeholder="请输入课程名"
            v-model="query"
            class="input-with-select"
            @clear="getschesuleclear()"
            @input="getschedulelist()"
            >
            </el-input>
            <el-button type="success" class="user-btn" @click="addbtn()">添加课程安排</el-button>
          </div>
          <!-- 表格数据 -->
          <div class="text">
            <el-table
            :data='list'
            stripe
            style="width: 100%"
            height="470"
            v-loading="loading"
            >
              <el-table-column
              type="index"
              width="40"
              >
              </el-table-column>
              <el-table-column
              prop="courseName"
              label="课程名称"
              width="180"
              >
              </el-table-column>
              <el-table-column
              prop="teacherName"
              label="任课老师"
              width="120"
              >
              </el-table-column>
              <el-table-column
              prop="semester"
              label="任课学期"
              width="250"
              >
              </el-table-column>
              <el-table-column
              prop="supervisorName"
              label="课程负责人"
              width="120"
              >
              </el-table-column>
              <el-table-column
              prop="editor"
              label="编辑"
              >
                <template slot-scope="scope">
                  <el-button
                  size="mini"
                  plain
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  @click="editor(scope.row)"
                  >
                  </el-button>
                  <el-button
                  size="mini"
                  plain
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="deleteOpen(scope.row)"
                  >
                  </el-button>
                  <el-button
                  size="mini"
                  plain
                  type="info"
                  icon="el-icon-menu"
                  circle
                  @click="watch(scope.row)"
                  >
                  </el-button>
                </template>
              </el-table-column>
          </el-table>
          </div>
          <!-- 分页组件 -->
          <div class="Conpager">
            <el-pagination
            class='stu-pager'
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="totalCount"
            >
          </el-pagination>
        </div>
        </div>
        <!-- 大班级学生表格数据 -->
        <div v-show="studentText">
            <!-- 面包屑 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>课程安排管理</el-breadcrumb-item>
              <el-breadcrumb-item>课程大班级的学生</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- 搜索框 -->
            <div class="user-search">
                <el-input
                v-model="fullName"
                disabled
                class="input-with-select"
                >
                </el-input>
                <el-button type="success" class="addexam-btn" @click="addstubtn()">添加学生</el-button>
                <el-button type="primary" class="back-btn" @click="back()">返回</el-button>
            </div>
            <!-- 学生列表信息 -->
            <div class="text item">
              <el-table
              ref="multipleTable"
              tooltip-effect="dark"
              :data='studentlist'
              stripe
              style="width: 100%"
              height="470"
              >
                <el-table-column
                type="index"
                width="40"
                >
                </el-table-column>
                <el-table-column
                prop="sid"
                label="学号"
                width="180"
                >
                </el-table-column>
                <el-table-column
                prop="sname"
                label="姓名"
                width="120"
                >
                </el-table-column>
                <el-table-column
                prop="major"
                label="专业"
                width="180"
                >
                </el-table-column>
                <el-table-column
                prop="cla"
                label="班级"
                width="180"
                >
                </el-table-column>
                <el-table-column
                prop="grade"
                label="届别"
                width="180"
                >
                </el-table-column>
                <el-table-column
                prop="editor"
                label="编辑"
                >
                  <template slot-scope="scope">
                    <el-button
                    size="mini"
                    plain type="danger"
                    icon="el-icon-delete"
                    circle
                    @click="deletestudent(scope.row)"
                    >
                    </el-button>
                  </template>
                </el-table-column>
             </el-table>
          </div>
        </div>
        <!-- 添加组件 -->
        <el-dialog title="添加课程" :visible.sync="dialogFormVisibleAdd" style=" min-width: 1300px">
          <el-form :model="form" style="text-align:left;margin-left:25%">
          <el-form-item label="课程名称">
            <el-select v-model="form.cid" placeholder="请选择课程"  style="width:300px">
              <el-option v-for="item of courselist" :key="item.cid" :label="item.name" :value="item.cid"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="任课老师">
            <el-select v-model="form.tid" placeholder="请选择老师"  style="width:300px">
              <el-option v-for="item of teacherlist" :key="item.tid" :label="item.name" :value="item.tid"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="任课班级">
            <el-select v-model="form.claId" placeholder="请选择班级"  style="width:300px">
              <el-option v-for="item of classlist" :key="item.claId" :label="item.claName" :value="item.claId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="任课学期">
            <el-input v-model="form.period" autocomplete="off" placeholder="请输入任课学期" @keyup.native.enter="addform()" style="width:300px"></el-input>
          </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
            <el-button type="primary" @click="addform()">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 编辑组件 -->
        <el-dialog title="编辑课程" :visible.sync="dialog" style=" min-width: 1300px">
          <el-form :model="form" style="text-align:left;margin-left:25%">
          <el-form-item label="课程名称" >
            <el-select v-model="form.cid" placeholder="请选择课程"  style="width:300px">
              <el-option v-for="item of courselist" :key="item.cid" :label="item.name" :value="item.cid"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="任课老师">
            <el-select v-model="form.tid" placeholder="请选择老师"  style="width:300px">
              <el-option v-for="item of teacherlist" :key="item.tid" :label="item.name" :value="item.tid"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="任课班级" :label-width="formLabelWidth">
             <el-select v-model="form.claId" placeholder="请选择班级"  style="width:360px" disabled>
              <el-option v-for="item of classlist" :key="item.claId" :label="item.claName" :value="item.claId"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="任课学期">
            <el-input v-model="form.period" autocomplete="off" @keyup.native.enter="editinfo()"  style="width:300px"></el-input>
          </el-form-item>
          <!-- <el-form-item label="课程负责人" :label-width="formLabelWidth">
            <el-select v-model="form.supervisorId" placeholder="请选择课程负责人"  style="width:360px">
              <el-option v-for="item of teacherlist" :key="item.tid" :label="item.name" :value="item.tid"></el-option>
            </el-select> -->
          <!-- </el-form-item> -->
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialog = false">取 消</el-button>
            <el-button type="primary" @click="editinfo()">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 添加学生进入班级 -->
        <el-dialog title="添加学生" :visible.sync="dialogstu" style=" min-width: 1300px" @opened="ToFocus()">
            <el-form :model="stuform" style="text-align:left;margin-left:25%">
                <el-form-item label="班级">
                <el-input v-model="fullName" autocomplete="off" disabled style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="学生">
                <el-input v-model="stuform.sid" placeholder="请输入学生学号" autocomplete="off" @keyup.native.enter="createdstu()" style="width:300px" ref="one"></el-input>
                <div class="testcolor">*输入的学号必须是已经存在的</div>
                </el-form-item>
            </el-form>
            <div slot="footer"  class="dialog-footer">
                <el-button @click="dialogstu = false">取 消</el-button>
                <el-button type="primary" @click="createdstu()">确 定</el-button>
            </div>
        </el-dialog>
      </el-card>
    </div>
</template>

<script>
export default {
  name: 'schedule',
  data () {
    return {
      loading: false,
      scheduleText: true,
      studentText: false,
      show: false,
      dialogstu: false,
      query: '',
      list: [],
      claId: '',
      BalId: '',
      pageNum: 1,
      pageSize: 8,
      totalCount: -1,
      dialogFormVisibleAdd: false,
      dialog: false,
      formLabelWidth: '80px',
      courseName: '',
      teacherName: '',
      form: {},
      stuform: {},
      cid: '',
      classlist: [],
      courselist: [],
      teacherlist: [],
      studentlist: [],
      islist: [
        {
          id: 1,
          name: '是',
          isid: 1
        },
        {
          id: 2,
          name: '否',
          isid: 0
        }
      ],
      is_Leader: 0
    }
  },
  components: {},
  mounted () {
    this.loading = true
  },
  methods: {
    // 课程安排信息获取
    async getschedulelist () {
      // 需要授权的API必须设置请求头
      const AUTH_TOKEN = sessionStorage.getItem('token')
      this.$http.defaults.headers.common['token'] = AUTH_TOKEN
      // 后台token的key是token
      this.$http.defaults.headers.get['Content-Type'] = 'application/json'
      this.$http.defaults.headers.get['Accept'] = 'application/json'
      const res = await this.$http.get(`time_table/list?pageNum=${this.pageNum}&pageSize=${this.pageSize}&name=${this.query}`)
      console.log(res)
      const {code, msg, page} = res.data
      // console.log(this.status)
      if (code === 200) {
        this.list = page.list
        this.cid = page.list.cid
        this.totalCount = page.totalCount
        this.loading = false
      } else {
        this.$message.error(msg)
        this.loading = false
      }
    },
    // 获取课程信息
    async getcourselist () {
      const res = await this.$http.get(`course/list?pageNum=1&pageSize=9999&name=`)
      // console.log(res)
      const {code, msg, page} = res.data
      // console.log(this.status)
      if (code === 200) {
        this.courselist = page.list
      } else {
        console.log(msg)
      }
    },
    // 获取班级信息
    async getclasslist () {
      const res = await this.$http.get(`classes/list?pageNum=1&pageSize=9999&name=`)
      // console.log(res)
      const {code, msg, page} = res.data
      // console.log(this.status)
      if (code === 200) {
        this.classlist = page.list
      } else {
        console.log(msg)
      }
    },
    // teacher/list?pageNum=1&pageSize=10&name=1%20
    // 获取教师信息
    async getteacherlist () {
      const res = await this.$http.get(`teacher/list?pageNum=1&pageSize=9999&name=`)
      // console.log(res)
      const {code, msg, page} = res.data
      // console.log(this.status)
      if (code === 200) {
        this.teacherlist = page.list
      } else {
        console.log(msg)
      }
    },
    // 清除搜索框
    getschesuleclear () {
      this.getschedulelist()
    },
    // 删除课程安排
    deleteOpen (info) {
      this.$confirm('此操作将永久删除该课程安排, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const id = info.timetableId
        const res = await this.$http.delete('time_table/delete', {data: {ids: [id]}})
        const {msg, code} = res.data
        if (code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getschedulelist()
        } else {
          this.$message.error(msg)
        }
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    },
    // 分页相关方法
    handleSizeChange (val) {
      this.pageSize = val
      // console.log(`每页 ${val} 条`)
      this.getschedulelist()
    },
    handleCurrentChange (val) {
      this.pageNum = val
      // console.log(`当前页: ${val}`)
      this.getschedulelist()
    },
    // 添加课程安排
    addbtn () {
      this.form = {}
      this.dialogFormVisibleAdd = true
    },
    async addform () {
      const res = await this.$http.post('time_table/save', this.form)
      // console.log(this.form)
      const {code} = res.data
      console.log(res)
      if (code === 200) {
        this.$message({
          type: 'success',
          message: '添加成功！'
        })
        this.getschedulelist()
        this.form = {}
        this.dialogFormVisibleAdd = false
      } else {
        this.$message.error('请检查是否为同一门课程添加了多位负责人！')
      }
    },
    // 编辑课程安排
    editor (info) {
      // console.log(info)
      this.form = {
        cid: info.courseId,
        claId: info.claId,
        period: info.semester,
        tid: info.teacherId,
        id: info.timetableId
      }
      // console.log(this.form)
      this.dialog = true
    },
    async editinfo () {
      // console.log(this.form)
      const res = await this.$http.put('time_table/update', this.form)
      // console.log(res)
      if (res.data.code === 200) {
        this.$message.success('修改成功！')
        this.getschedulelist()
        this.dialog = false
      } else {
        this.$message.error('error')
      }
    },
    // 进入学生页面
    async watch (info) {
      // console.log(info)
      this.scheduleText = false
      this.studentText = true
      this.teacherName = info.teacherName
      this.courseName = info.courseName
      this.BclaId = info.BclaId
      const res = await this.$http.get(`classes/info/${this.BclaId}`)
      // console.log(res)
      const {code, msg, classesVo} = res.data
      // console.log(this.status)
      if (code === 200) {
        this.studentlist = classesVo.list
      } else {
        this.$message.error(msg)
      }
    },
    // 添加学生进入班级
    addstubtn () {
      this.dialogstu = true
    },
    async createdstu () {
      const form = {
        sid: this.stuform.sid,
        claId: this.BclaId
      }
      // console.log(form)
      const res = await this.$http.post(`cla_stu/save`, form)
      // console.log(res)
      if (res.data.status === 200) {
        this.$message.success('添加成功！')
        this.dialogstu = false
        this.$http.get(`classes/info/${this.BclaId}`).then((mes) => {
          const {code, msg, classesVo: {list}} = mes.data
          // console.log(this.status)
          if (code === 200) {
            this.studentlist = list
          } else {
            console.log(msg)
          }
        })
      } else {
        this.$message.error(res.data.msg)
      }
    },
    // 删除班级下的学生
    deletestudent (info) {
      // console.log(info.sid)
      this.$confirm('此操作将永久删除该学生, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const sid = info.sid
        const res = await this.$http.delete('cla_stu/delete', {data: {id: this.BclaId, ids: [sid]}})
        // console.log(res)
        const {msg, code} = res.data
        if (code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.$http.get(`classes/info/${this.BclaId}`).then((mes) => {
            const {code, msg, classesVo: {list}} = mes.data
            // console.log(mes)
            if (code === 200) {
              this.studentlist = list
            } else {
              console.log(msg)
            }
          })
        } else {
          this.$message.error(msg)
        }
      }).catch(() => {})
    },
    // 返回按钮
    back () {
      this.scheduleText = true
      this.studentText = false
    },
    ToFocus () {
      this.$refs.one.focus()
    }
  },
  computed: {
    fullName () {
      return this.courseName + ' ' + this.teacherName
    }
  },
  created () {
    this.getschedulelist()
    this.getcourselist()
    this.getclasslist()
    this.getteacherlist()
    // let _this = this
    // setTimeout(function () { _this.show = true }, 150)
  }
}
</script>

<style scoped lang="stylus">
.schedule,.card
  height 100%
  min-width: 1200px
  .user-search
    margin-top 15px
    width 100%
    .input-with-select
      width 300px
    .user-btn
      width 130px
  .text
    padding-top 10px
    height 470px
  .Conpager
    margin 0 auto
    padding-top 5px
  .stu-pager
    margin-top 54px
    text-align center
.testcolor
  margin-left 10px
  padding-top 5px
  font-size 13px
  color red
.dialog-footer
  text-align center
</style>
